<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="admin/layout/include::head('目录编辑','')"></head>
<body>
<form id="data-form" lay-filter="data-form" class="layui-form model-form no-padding">
    <input name="navId" type="hidden"/>
    <div class="model-form-body" style="max-height:380px;">
        <div class="layui-form-item">
            <label class="layui-form-label required">菜单名称</label>
            <div class="layui-input-block">
                <input name="navName" placeholder="请输入菜单名" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required" lay-tips="菜单地址，系统链接直接写相对地址，外部地址需要写http(s)" lay-direction="2">
                菜单地址<span class="icon-text"><i class="layui-icon layui-icon-tips"></i></label>
            <div class="layui-input-block">
                <input name="navUrl" placeholder="菜单url" type="text" class="layui-input" maxlength="100"
                       lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单图标</label>
            <div class="layui-input-block">
                <input type="text" id="iconPicker" lay-filter="iconPicker" style="display:none;">
                <input type="hidden" name="navIcon" id="navIcon" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单类型</label>
            <div class="layui-input-block">
                <select name="navType" lay-verify="required">
                    <option value=""></option>
                    <option value="1">网站菜单</option>
                    <option value="2">top菜单</option>
                    <option value="3">底部导航</option>
                    <option value="4">快速通道</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">打开方式</label>
            <div class="layui-input-block">
                <select name="target" lay-verify="required">
                    <option value=""></option>
                    <option value="_self">当前窗口打开</option>
                    <option value="_blank">新窗口打开</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">样式配置</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="navStyle" value="#000" placeholder="请选择颜色" class="layui-input" id="navStyle">
            </div>
            <div class="layui-input-inline" style="left: -11px;">
                <div id="colorpicker"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input name="orderNo" placeholder="排序" type="number" class="layui-input"
                       lay-verify="number"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" id="state" name="state" lay-skin="switch" value="0" checked lay-text="正常|禁用">
            </div>
        </div>
    </div>
    <div class="layui-form-item text-right model-form-footer">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="formSubmit" lay-submit>保存</button>
    </div>
</form>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<script>
    layui.use(['layer', 'admin', 'form','iconPicker','colorpicker'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var colorpicker = layui.colorpicker;
        var iconPicker = layui.iconPicker;
        colorpicker.render({
            elem:'#colorpicker', //绑定元素
            color:'#000',
            done:function (color) {
                $('#navStyle').val(color);
            }
        });
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: false,
            // 每个图标格子的宽度：'43px'或'20%'
            cellWidth: '43px',
            // 点击回调
            click: function (data) {
                $('#navIcon').val(data.icon);
            }
        });

        // 回显数据
        var nav = admin.getTempData('t_nav');
        if (nav) {
            form.val('data-form',{
                'navId':nav.navId,
                'navName':nav.navName,
                'navUrl':nav.navUrl,
                'navType':nav.navType,
                'target':nav.target,
                'navStyle':nav.navStyle,
                'orderNo':nav.orderNo,
                'navIcon':nav.navIcon

            });
            colorpicker.render({elem:'#colorpicker',color:nav.navStyle,done:function (color) {
                    $('#navStyle').val(color);
                }});
            if(!B.isEmpty(nav.navIcon)){
                iconPicker.checkIcon('iconPicker', nav.navIcon);
            }

            $('#state').prop('checked',nav.state==0?"checked":"");
            form.render();
        }

        // 表单提交事件
        form.on('submit(formSubmit)', function (data) {
            data.field.state = data.field.state==0?'0':'1';
            // 表单提交事件
            B.post({
                url: '/admin/nav/',
                loading: true,
                data: data.field,
                success: function (data) {
                    if (data.success) {
                        top.layer.msg(data.msg, {icon: 1});
                        admin.putTempData('formOk', true);  // 操作成功刷新表格
                        // 关闭当前iframe弹出层
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    } else {
                        top.layer.msg(data.msg, {icon: 2});
                    }
                }
            });
            return false;
        });

    });
</script>

</body>